<!DOCTYPE html>

<html>
<head>
	<meta charset="UTF-8" />
	<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.17.custom.css"/>
	<!--Main.css for custom styles and jquery UI overrides -->
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<!--link rel="stylesheet" type="text/css" href="css/reset.css" /-->
    
    <script type="text/javascript" src="libraries/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="libraries/jquery-ui-1.8.17.custom.min.js"></script>
    <script type="text/javascript" src="libraries/kinetic-v3.6.4.js"></script>
    <script type="text/javascript" src="javascript/shapes.js"></script>
    <script type="text/javascript" src="javascript/draw.js"></script>
   	<script type="text/javascript" src="javascript/gui.js"></script>
    
    
    <title>Töfluteikn 0.5 Beta</title>
</head>
<body >
	<header>
	</header>
	
	<div id="canvas-container" class="ui-widget-content">
		<h3 class="ui-widget-header">
			Resizable Board
			<img id="spinner" class="dsp-none" alt="Work being done indicator"src="img/spinner.gif"/>
		</h3>
		<div id="whiteboard">
			
			
		</div>
	</div>
	<form name="toolbar-form">
	<div id="toolbar" class="ui-widget-header ui-corner-all">
		<div id="btnset-general">
			<button id="btn-reset">Reset</button>
			<button id="btn-undo" value="Undo">Undo</button>
			<button id="btn-redo" value="Redo">Redo</button>
			<button id="btn-save"  value="Save">Save</button>
		</div>
		
		<div id="btnset-shapes">
			<input type="radio" id="ui-shape0" name="ui-shape" value="pen"  /><label for="ui-shape0">Pen</label>
			<input type="radio" id="ui-shape1" name="ui-shape" value="line" checked="checked"/><label for="ui-shape1"><img src="img/line.png" class="shapes" alt="Line tool"/></label>
			<input type="radio" id="ui-shape2" name="ui-shape" value="rect" /><label for="ui-shape2"><img src="img/rect.png" class="shapes" alt="Rectangle shape"/></label>
			<input type="radio" id="ui-shape3" name="ui-shape" value="circ" /><label for="ui-shape3"><img src="img/circ.png" class="shapes" alt="Circle shape"/></label>
			<input type="radio" id="ui-shape4" name="ui-shape" value="tria" /><label for="ui-shape4"><img src="img/tria.png" class="shapes" alt="Triangle shape"/></label>
		</div> 
		<div id="btnset-selects">
		<label for="ui-line-width">Width</label>
		<select id="ui-line-width" name="ui-line-width" class="ui-widget-content">
			<option id="thin-line" value="2">Thin</option>
			<option id="medium-line" value="4" selected="selected">Normal</option>
			<option id="large-line" value="6">Thick</option>
			<option id="xlarge-line" value="8">F..Huge</option>
		</select>
		
		<label for="ui-line-color">Color</label>
		<select id="ui-line-color" name="ui-line-color" class="ui-widget-content">
			<option id="black-line" value="black" selected="selected">Black</option>
			<option id="red-line" value="red">Red</option>
			<option id="green-line" value="green">Green</option>
			<option id="blue-line" value="blue">Blue</option>
		</select>
		<label for="ui-fill-color">Fill</label>
		<select id="ui-fill-color" name="ui-fill-color" class="ui-widget-content">
			<option id="black-fill" value="white" selected="selected">None</option>
			<option id="black-fill" value="black">Black</option>
			<option id="red-fill" value="red">Red</option>
			<option id="green-fill" value="green">Green</option>
			<option id="blue-fill" value="blue">Blue</option>
		</select>
		</div>
	
	</div>
	</form>	
	
	<footer>
		<div id="actionMsg"></div>
		<div id="mouseMsg"></div
	</footer>
		
	
     
</body>
</html>
